<template>
  <div>
    <p v-if= "adminType ==='组织'" class="title" >上传盖章推荐表</p><!--根据申报方式判断是否显示组织推荐-->
    <p v-else-if="adminType==='个人'" class="title">上传身份证</p><!--根据申报方式判断是否显示个人推荐-->
    <p slot="tip" class="el-upload__tip">只能上传一张jpg/png/tif/tga文件，且不超过30M</p>
  <el-form  label-width="80px">
    <el-form-item prop="upload" >
      <el-upload
        action="#"
        list-type="picture-card"
        :auto-upload="false"
        :on-change="handle_success"
        :file-list="fileList"
        :multiple="false"
        :limit="1">
        <i slot="default" class="el-icon-plus"></i>
        <div slot="file" slot-scope="{file}">
          <img
            class="el-upload-list__item-thumbnail"
            :src="file.url" alt=""
          >
          <span class="el-upload-list__item-actions">
        <span
          class="el-upload-list__item-preview"
          @click="handlePictureCardPreview(file)"
        >
          <i class="el-icon-zoom-in"></i>
        </span>
        <span
          v-if="!disabled"
          class="el-upload-list__item-delete"
          @click="handleDownload(file)"
        >
          <i class="el-icon-download"></i>
        </span>
        <span
          v-if="!disabled"
          class="el-upload-list__item-delete"
          @click="handleRemove(file)"
        >
          <i class="el-icon-delete"></i>
        </span>
      </span>
        </div>
      </el-upload>
    </el-form-item>
    <el-dialog :visible.sync="dialogVisible">
      <img width="100%" :src="dialogImageUrl" alt="预览图片">
    </el-dialog>
  </el-form>
      <el-button type="waring" @click="$router.go(-1)">上一步</el-button>
    <router-link to="/list">
      <el-button type="warning" @click="onSubmit">提交</el-button>
    </router-link>
      <el-button type="warning" @click="onRemain">暂存</el-button><!--暂存后不会页面跳转！-->
    </div>
</template>

<script>
export default {
  name: 'StampIdentity',
  data () {
    return {
      id: 15, // 页面传来的死数据id
      adminType: '', // 可以更具id查询到值
      dialogImageUrl: '',
      dialogVisible: false,
      disabled: false,
      fileList: [],
      files: [],
      pstatus: '1'
    }
  },
  methods: {
    handle_success (file, fileList) {
      // console.info(file)
      console.info(file.raw)
      // console.info(fileList)
      // console.info(this.fileList)
      this.fileList.push({
        name: file.name,
        url: file.url
      })
      this.files.push(file)
      console.info(this.files)
      // const formData = new FormData()
      // formData.append('id', 16)
      // formData.append('file', file.raw)
      // this.$axios.post('/multiImage/upload', formData)
    },
    handleRemove (file) {
      let index = this.fileList.findIndex(item => item.url === file.url)
      this.fileList.splice(index, 1)
      this.files.splice(index, 1)
    },
    handlePictureCardPreview (file) {
      this.dialogImageUrl = file.url
      this.dialogVisible = true
    },
    handleDownload (file) {
      window.open(file.url)
    },
    // 点击暂存按钮
    onRemain: function () {
      // eslint-disable-next-line no-constant-condition,no-self-compare
      console.log(this.files)
      if (this.files.length === 0) {
        window.alert('必须上传一张图片！')
        console.log('submit error')
      } else {
        let formData = new FormData()
        formData.append('id', 1)
        this.files.forEach(el => {
          formData.append('file', el.raw)
        })
        this.$axios.post('/api/stamp/addStamp', formData)
        console.log('submit success')
      }
    },
    // 点击提交按钮
    onSubmit: function () {
      // eslint-disable-next-line no-constant-condition,no-self-compare
      console.log(this.files)
      if (this.files.length === 0) {
        window.alert('必须上传一张图片！')
        console.log('submit error')
      } else {
        let formData = new FormData()
        formData.append('id', 1)
        this.files.forEach(el => {
          formData.append('file', el.raw)
        })
        this.$axios.get('/api/baseInfo/15').then(res => {
          this.adminType = res.data.data.adminType
          // console.info(this.adminType)
          if (this.adminType === '组织') {
            this.$axios.post('/api/stamp/addStamp', formData)
          } else if (this.adminType === '个人') {
            this.$axios.post('/api/identity/addIdentity', formData)
          } else {
            console.log('error adminType!!')
          }
          this.$axios.put('/api/baseInfo/15', {pstatus: this.pstatus})// 死数据id=1, 更新status为1
          console.log('submit success')
        })
      }
    }
  }

}
</script>

<style scoped>

</style>
